<template>
    <div class="body">
   
    <div class="container">
        <div class="login">
            <h2>register</h2>
            <div class="box">
                <div class="form-group">
                    <label >账号</label>
                    <input v-model="registerForm.username" type="text"  />
                </div>
                <div class="form-group">
                    
                    <label >密码</label>
                    <input  v-model="registerForm.password" type="password"  />
                </div>

                <button id="btn" @click="register">注册账号</button>
                <a href="" @click="back" id="registerd">返回</a>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            registerForm:{
                username:null,
                password:null,
            }
        }
    },
    methods:{
        back(){
            this.$router.push({path:'/login'})
        },
        async register(){
            
            if (this.registerForm.username==null||this.registerForm.password==null){
                return this.$message.error("请输入账号或者密码")
            }
            var reg=/^[0-9A-Za-z_]+$/
            var regPass=/(\s+)/
            if (!reg.test( this.registerForm.username)){
                return this.$message.error("账号只能包含数字字母下划线")
            }
            if (regPass.test(this.registerForm.password)){
                return this.$message.error("密码不能包括空白字符")
            }
            console.log(this.registerForm)
            const {data:res}=await this.$http.post("register",this.registerForm)
               
            if (res.code!==0){
                return this.$message.error("注册失败:"+res.msg); 
            }
            this.$message.success("注册成功")
            const {data:res2}=await this.$http.post("login",this.registerForm)
            
            if (res2.code!==0){
                return this.$message.error("登录失败:"+res.msg); 
            }
            this.$message.success("登录成功")
            //接着就要保存token了，保存到sessionStorage
            //通过编程式导航跳转后台主页，路由地址是/home
            window.sessionStorage.setItem('token',res2.data.token)
            window.sessionStorage.setItem('authorityId',res2.data.user.authorityId)
            this.$router.push({path:'/home'})
        }
    }
}
</script>
<style >
    .body {
            width: 100%;
            height: 100vh;
            background: linear-gradient(-45deg, #ee6654, #e71c6e, #2396d5, #23c5ab);
            background-size: 400% 400%;
            animation: moveBg 10s linear infinite;
        }

        @keyframes moveBg {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0 50%;
            }
        }
        .container {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .login {
            width: 400px;
            height: 350px;
            background: rgba(21, 124, 172, 0.493);
            position: absolute;
            top: calc(50% - 178px);
            left: calc(50% - 240px);
            border-radius: 16px;
            box-shadow: 0 0 5px rgba(123, 194, 199, 0.411);
        }

        .box {
            width: 100%;
            height: 200px;
            /* background-color: red; */
            position: absolute;
            top: 25%;
        }

        input {
            width: 356px;
            height: 30px;
            outline-style: none;
            border: none;
            border-bottom: 2px solid #ffffff;
            display: block;
            font-size: 18px;
            color: #ffffff;
            background: transparent;
        }

        label {
            display: block;
            color: #ffffff;
        }

        .form-group {
            width: 365px;
            height: 50px;
            /* background: blue; */
            margin: 20px auto;
        }

        h2 {
            text-align: center;
            font-size: 34px;
            color: #ffff;
            border-bottom: 3px solid #ffffff;
            width: 100px;
            margin: 18px auto;
        }

        #btn {
            width: 300px;
            height: 40px;
            position: absolute;
            bottom: -40px;
            left: calc(50% - 150px);
            font-size: 20px;
            font-weight: bold;
            color: #ffff;
            background: transparent;
            border-radius: 20px;
            border: 3px solid rgb(13, 168, 109);
        }

        a,
        a:hover {
            text-decoration: none;
            color: #ffffff;
        }

        #registerd {
            position: absolute;
            bottom: -47px;
            left: 10px;
        }
</style>